<script>
import { ref, inject, onMounted, reactive, toRefs, computed, watch } from 'vue';
import heComponents from '@/components/header.vue'
import { useRouter } from 'vue-router';

export default {
  components: {
    heComponents
  },
  setup(props,ctx) {

    const message = inject('message')
    // let count = {
    //   value: 0
    // }
    // let count = ref(0)
    let router = useRouter()
    let state = reactive({
      id: 1,
      name: "张三",
      count: 0
    });

    watch(
      () => state.id,
      (newId, oldId) => {
        console.log(newId, oldId);
      }
    )


    let countClick = () => {
      state.count++
      console.log(state.count);
      router.push("/about")
    }

    let getChildren = (v) => {
      console.log("fa: ", v);
    }


    // computed 返回数值类型是：ref
    let countComputed = computed(() => {
      return state.count + 1
    })

    onMounted(() => {
      console.log("onMounted: ", message);
      setTimeout(()=> {
        state.id = 10
      },3000)
    })

    return {
      ...toRefs(state),
      countClick,
      countComputed,
      getChildren
    }
  }
}

</script>

<template>
  <div class="home">
    <!-- <input type="text" v-model="list.name"> -->
    <!-- {{ list.name }} -->
    <heComponents title="你好这是测试" @fas="getChildren"></heComponents>
    <h1 @click="countClick">首页 {{ count }} {{ countComputed }}</h1>
  </div>
</template>
